<template>
	<div class="app-dialog">
		<!--弹出框-->
		
		<el-dialog
		  :title="dialogTitle"
		  :visible.sync="dialogVisible"
		  :width="width"
		  :before-close="handleCancle">
		  <el-scrollbar>
		  	<slot></slot>
		  </el-scrollbar>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="handleCancle">取消</el-button>
		    <el-button :disabled="loading" type="primary" @click="handleConfirm">确定</el-button>
		  </span>
		</el-dialog>
		
	</div>
</template>

<script>
export default {
	name: "appDialog",
	props: [
		"visible",
		"title",
		"width"
	],
	components: {
		
	},
	data() {
    return {
    	loading:false,
      dialogVisible: false,
      dialogTitle:"",
    }
  },
  mounted() {
    this.dialogVisible = this.visible || false;
    this.dialogTitle = this.title || "提示" ;
  },
	methods:{
//		handleClose(done) {
//    this.$confirm('确认关闭？')
//    .then(_ => {
//      done();
//    })
//    .catch(_ => {});
// 	},
   	handleConfirm(){
   		this.loading=true ;
   		setTimeout(()=>{
   			this.loading = false;
   		},300)
	    this.$emit("confirm")
 		  this.close();
   	},
   	handleCancle(){
   		this.$emit("cancle")
   		this.close();
   	},
   	close(){
   		this.dialogVisible = false;
   	},
   	open(){
   		this.dialogVisible = true;
   	}
	}
}
</script>

<style lang="scss">
@import "../../../styles/variables.scss";

.app-dialog {
	
	.el-dialog {
	 	margin-bottom: 0;
	 	
	}
	
	.el-dialog__body {
		box-sizing:border-box;
		max-height: calc(100vh - 300px);
		min-height: 0px;
		
		.el-scrollbar {
			height: auto;
			max-height: calc(100vh - 300px);
			
			.el-scrollbar__wrap {
				height: auto;
				max-height: calc(100vh - 300px);
				overflow-x: hidden;
			}
			
			.el-scrollbar__view {
				padding-right: 10px;
			}
		}
		
		
		.el-form {
			margin: 10px 0 20px;
			
			.el-form-item {
				margin-bottom: 10px;
				
				&.is-error {
					
				}
			}
			.el-form-item__content {
				position: relative;
				
				.el-input__inner {
					padding: 0 10px !important;
				}
				.el-input__validateIcon {
					margin-right: -35px;
					margin-left: 10px;
					display: none;
				}
				
				div {
					display: inline-block;
				}
				.el-form-item__error {
					position: relative;
					margin-left: 10px;
				}
			}
		}
		
		
		.el-alert {
			margin: 10px 0;
			padding: 5px 10px;
			font-size: 12px;
			&.el-alert--info {
				background: #fff;
				border: 1px solid $borderLightGrey;
			}
		}
		
		
	}

	
}

</style>